<template>
  <el-container class="layout-container">
    <el-aside width="200px">
      <el-scrollbar>
        <el-menu :router="true" :default-active="activeMenu" text-color="#fff" active-text-color="#ffd04b"
          background-color="#545c64" class="el-menu" @select="select">
          <el-menu-item :index="item.path" v-for="item in routeList" :key="item.id">{{
          item.label }}</el-menu-item>
        </el-menu>
      </el-scrollbar>
    </el-aside>
    <el-container>
      <el-header>
        <el-breadcrumb separator="/">
          <el-breadcrumb-item v-for="(item, index) in bread" :to="item.url" :key="index">{{ item.title
            }}</el-breadcrumb-item>
        </el-breadcrumb>
        <div class="functionalDomain">
          <slot name="functionalDomain"></slot>
        </div>
      </el-header>

      <el-main>
        <slot></slot>
      </el-main>
    </el-container>
  </el-container>
</template>

<script lang="ts" setup>
import { ref, watch } from 'vue'
import { Menu as IconMenu, Message, Setting } from '@element-plus/icons-vue'
import { useRouter, useRoute } from 'vue-router'
const router = useRouter();
const route = useRoute();

const props = defineProps<{
  bread: {
    title?: string;
    url?: string;
  }[]
}>()

const { bread } = props;

const routeList = [{
  id: 1,
  label: '首页',
  path: '/',
}, {
  id: 2,
  label: '管理员管理',
  path: '/admin',
}, {
  id: 3,
  label: '用户管理',
  path: '/user',
}, {
  id: 4,
  label: '笔记管理',
  path: '/note',
}, {
  id: 4,
  label: '课程管理',
  path: '/course',
}, {
  id: 5,
  label: '素材管理',
  path: '/material',
}, {
  id: 5,
  label: '音乐',
  path: '/music',
}]

const activeMenu = ref(route.path);

const select = (index: string) => {
  router.push(index)
}

watch(() => route.path, (newPath) => {
  activeMenu.value = newPath;
});
</script>

<style scoped lang="less">
.layout-container {
  height: 100vh;
}

.layout-container .el-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--el-text-color-primary);
  font-size: 15px;
  height: 60px;
}

.layout-container .el-aside {
  /* color: var(--el-text-color-primary); */
  background: var(--te-color-info-dark-1);

  .el-menu {
    background: var(--te-color-info-dark-1);
  }
}

.layout-container .el-menu {
  border-right: none;
}

.layout-container .el-main {
  padding: 20px;
  height: calc(100vh - 60px);
}

.layout-container .toolbar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  right: 20px;
}
</style>
